<template>
  <div>
    <div class="margin10">
      <el-button class="scolor" @click="$router.back()">返回类别管理</el-button>
    </div>
    <el-card class="margin10">
      <el-form :inline="true" class="demo-form-inline">
        <el-row type="flex" justify="space-around">
          <el-col :span="8">
            <el-form-item label="类别名称">
              <el-input v-model="message" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="inquire">查询</el-button>
              <el-button type="warning" @click="resetData">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="margin10">
      <el-row type="flex" justify="space-around">
        <el-col :span="12" class="margin10">
          <el-tag
            type="info"
            class="fonts"
          >子类别总数:{{
            inquireArr.length ? inquireArr.length : categoryList.length
          }}</el-tag>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="addFn">新增类别</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-table
      :data="inquireArr.length ? inquireArr : categoryList"
      height="500"
      border
      style="width: 100%"
    >
      <el-table-column
        align="center"
        prop="categoryname"
        label="子类别名称"
      />
      <el-table-column
        align="center"
        prop="number"
        label="排序"
      />
      <el-table-column align="center" label="操作">
        <template v-slot="scope">
          <el-row>
            <el-col>
              <el-button
                type="primary"
                size="medium"
                @click="editFn(scope.row)"
              >编辑</el-button>
              <el-button
                type="danger"
                size="medium"
                @click="delFn(scope.$index)"
              >删除</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出层 -->

    <el-dialog
      :title="type === 1 ? '新增' : '编辑'"
      :visible="showDialog"
      width="400px"
      @close="btnCancel"
    >
      <el-form
        ref="sonForm"
        :model="sonForm"
        :rules="rules"
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="子类别名称" prop="categoryname">
          <el-input v-model="sonForm.categoryname" style="width:100px" />
        </el-form-item>
        <el-form-item label="子类别排序" prop="number">
          <el-input v-model="sonForm.number" style="width:100px" />
        </el-form-item>
      </el-form>

      <el-row slot="footer" type="flex">
        <el-col>
          <el-button @click="btnCancel">取 消</el-button>
          <el-button type="primary" @click="btnOK">确 定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getCategoryById } from '@/api/trade'
// 数据结构写错了 这个界面逻辑全是乱的 崩溃
export default {
  components: {},
  props: {},
  data() {
    return {
      categoryList: [],
      sonForm: {
        categoryname: '',
        number: ''
      },
      rules: {
        categoryname: [
          {
            required: true,
            message: '请输入行业名称',
            trigger: 'blur'
          }
        ],
        number: [
          {
            required: true,
            message: '请输入行业排序',
            trigger: 'blur'
          }
        ]
      },
      inquireArr: [],
      message: '',
      showDialog: false,
      type: null
    }
  },
  computed: {
    // 计算子类别数据
  },
  created() {
    this.getCategoryById()
  },
  mounted() {},
  methods: {
    // 查询
    inquire() {
      // 用正则实现模糊查询
      this.inquireArr = []
      if (this.message.trim()) {
        var str = '.*' + this.message + '.*'
        const reg = new RegExp(str)
        for (var i = 0; i < this.categoryList.length; i++) {
          if (reg.test(this.categoryList[i].categoryname)) {
            this.inquireArr.push(this.categoryList[i])
          }
        }
        console.log(this.inquireArr)
        if (this.inquireArr.length) {
          this.$message.success(`查询到${this.inquireArr.length}条数据`)
        } else {
          this.$message.error('暂无数据')
        }
      } else {
        this.$message.warning('请输入查询内容')
      }
    },
    // 重置 简陋版
    resetData() {
      // console.log('重置')
      this.message = ''
      this.inquireArr = []
      this.getCategoryById()
      this.$message.success('数据已经重置')
    },
    // 根据id获取数据
    async getCategoryById() {
      const res = await getCategoryById(this.$route.params.id)
      console.log(res)

      this.categoryList = res.son
    },
    // 删除 没有删除后台数据
    delFn(index) {
      console.log(this.categoryList)
      if (this.inquireArr.length) {
        this.inquireArr.splice(index, 1)
      }
      this.categoryList.splice(index, 1)
    },
    // 新增 没有添加到后台
    addFn() {
      // this.sonForm = {}
      this.type = 1
      this.showDialog = true
      // 数据更新不是同步的 需要用$nextTick()等待dom节点挂在完成后才能通过this.$refs取到表单
      // this.$nextTick(() => {
      //   this.$refs.sonForm.validate()
      // })
    },
    // 编辑
    editFn(row) {
      this.type = 2
      this.showDialog = true
      this.sonForm = row
      // console.log(this.sonForm)
    },
    // 弹出层
    btnCancel() {
      this.sonForm = {
        categoryname: '',
        number: ''
      }
      // 重置之后就不能吧表单的值push进数组里了
      // this.$refs.sonForm.resetFields()

      this.showDialog = false
    },
    async btnOK() {
      if (this.sonForm.id) {
        // 编辑
        return
      } else {
        // 新增
        await this.$refs.sonForm.validate()
        this.categoryList.push(this.sonForm)
        console.log(this.categoryList)
      }
      this.showDialog = false
    }
  }
}
</script>
<style scoped>
.margin10 {
  margin: 10px 0;
}
.scolor {
  background-color: #fcc068;
  color: #fff;
}
.fonts {
  font-size: 16px;
  color: #000;
}
</style>
